<template>
  <div>
    <el-form :model="activities" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="活动名称" prop="activityName">
        <el-input v-model="activities.activityName" placeholder="请输入活动名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="负责人" prop="leader">
        <el-input v-model="activities.leader" placeholder="请输入负责人名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="被采样方" prop="beSampleUnits">
        <el-input v-model="activities.beSampleUnits" placeholder="请输入被采样单位名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="采样方" prop="sampleUnits">
        <el-input v-model="activities.sampleUnits" placeholder="请输入采样单位名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="activities.status" placeholder="活动状态" clearable>
          <el-option v-for="(item, index) in status" :key="index" :label="item" :value="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>


    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="activityName" label="活动名称" width="120" align="center">
        <template slot-scope="scope">
          <span @click="goBeSampleActivities(scope.row)" class="link-type">{{scope.row.activityName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="leader" label="负责人" width="100" align="center">
      </el-table-column>
      <el-table-column label="开始日期" width="160" align="center">
        <template slot-scope="scope">{{ scope.row.activityBeginTime }}</template>
      </el-table-column>
      <el-table-column label="结束日期" width="160" align="center">
        <template slot-scope="scope">{{ scope.row.activityEndTime }}</template>
      </el-table-column>
      <el-table-column prop="totalPeoples" label="总人数" width="80" align="center">
      </el-table-column>
      <el-table-column prop="beSampleUnits" label="被采样单位" width="180" align="center">
      </el-table-column>
      <el-table-column prop="sampleUnits" label="采样单位" width="180" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 0"><el-tag type="info">未举行</el-tag></div>
          <div v-else-if="scope.row.status === 1"><el-tag type="success">举行中</el-tag></div>
          <div v-else><el-tag type="danger">已结束</el-tag></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showActivity(scope.row.activitiesId)"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="total">
    </el-pagination>

    <el-dialog title="核酸检测活动" :visible.sync="open">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.activityName" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" :label-width="formLabelWidth">
              <el-input v-model="form.leader" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" :label-width="formLabelWidth">
              <el-input v-model="form.leaderPhone" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期" :label-width="formLabelWidth">
              <el-input v-model="form.activityBeginTime" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" :label-width="formLabelWidth">
              <el-input v-model="form.activityEndTime" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="被采样单位" :label-width="formLabelWidth">
              <el-input v-model="form.beSampleUnits" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样单位" :label-width="formLabelWidth">
              <el-input v-model="form.sampleUnits" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="被采样单位名称" :label-width="formLabelWidth">
              <el-input v-model="form.beSampleUnitsName" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样单位名称" :label-width="formLabelWidth">
              <el-input v-model="form.sampleUnitsName" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="被采样单位电话" :label-width="formLabelWidth">
              <el-input v-model="form.beSampleUnitsPhone" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样单位电话" :label-width="formLabelWidth">
              <el-input v-model="form.sampleUnitsPhone" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="总人数" :label-width="formLabelWidth">
              <el-input v-model="form.totalPeoples" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-radio-group style="display: flex;margin: 10px auto" text-color="#ff0000" v-model="form.status">
                <el-radio style="width: 50px" v-for="(item,index) in status"
                          :key="index"
                          :label="index"
                          :disabled="form.status!==index">{{item}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getAllActivitiesByPage,deleteRecord,exportRecord,getActivity } from "../../api/testManagement/record";

export default {
  name: "index",
  data() {
    return {
      activities: {
        pageNum: 1,
        pageSize: 10,
        beSampleUnitsId: JSON.parse(localStorage.getItem("userInfo")).unitsId,
        leader: '',
        activityName: '',
        beSampleUnits: '',
        sampleUnits: '',
        status: '',
      },
      dateRange: [],
      tableData: [
        {
          activitiesId: '',
          activityName: "",
          activityBeginTime: "",
          activityEndTime: "",
          totalPeoples: '',
          leader: "",
          beSampleUnits: "",
          sampleUnits: "",
          status: ''
        }
      ],
      ids: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      multiple: true,
      status:['未举行','举行中','已结束'],
      open:false,
      form: {
        activityBeginTime: "2022-08-02 16:00:00",
        activityEndTime: "2022-08-02 20:00:00",
        activityName: "测试",
        beSampleUnits: "南昌大学",
        beSampleUnitsId: 18,
        beSampleUnitsName: "",
        beSampleUnitsPhone: "",
        leader: "",
        leaderPhone: "",
        remark: "",
        sampleUnits: "",
        sampleUnitsId: 0,
        sampleUnitsName: "",
        sampleUnitsPhone: "",
        status: 0,
        totalPeoples: 0
      },
      formLabelWidth: '120px',
    }
  },
  created() {
    const beSample = this.$route.query && this.$route.query.beSample
    if (beSample) {
      this.goBeSampleActivities(this.$store.state.data)
    } else {
      this.getAllActivitiesByPage()
    }
  },
  methods: {
    getAllActivitiesByPage() {
      //获取核酸检测活动记录
      getAllActivitiesByPage(this.activities).then(res => {
        // console.log(res.data)
        this.currentPage = res.data.current
        this.activities.pageSize = res.data.pageSize
        this.total = res.data.total
        this.tableData = res.data.list
        if (this.activities.beginTime !== '' || this.activities.endTime !== '') {
          this.activities.beginTime = ''
          this.activities.endTime = ''
        }
      }).catch(err => {
        console.log("err" + err)
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.activitiesId)
      this.multiple = !selection.length
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.activities.pageSize = val
      this.getAllActivitiesByPage()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.activities.pageNum = val
      this.getAllActivitiesByPage()
    },
    handleDelete(row) {
      const activitiesIds = row.activitiesId || this.ids;
      this.$confirm('是否确认删除记录编号为"' + activitiesIds + '"的数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return deleteRecord(activitiesIds);
      }).then(() => {
        this.getAllActivitiesByPage()
        this.$message({
          message: "删除成功",
          type: "success"
        })
      })
    },
    handleExport() {
      exportRecord(this.activities).then(res => {
        let blob = new Blob([res.data],{type:'application/vnd.ms-excel'})
        let filename = window.decodeURI(res.headers['content-disposition']).split('=')[1]
        console.log(filename)
        let url = window.URL.createObjectURL(blob)
        let aLink = document.createElement("a")
        aLink.style.display = "none"
        aLink.href = url
        aLink.setAttribute("download",filename)
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
        window.URL.revokeObjectURL(url)
      })
    },
    handleQuery() {
      this.activities.currentPage = 1
      // console.log(this.dateRange)
      if (this.dateRange) {
        this.activities.beginTime = this.dateRange[0]
        this.activities.endTime = this.dateRange[1]
        // console.log("123")
      }
      // console.log("456")
      this.getAllActivitiesByPage()
    },
    resetQuery(formName) {
      this.activities.beginTime = ''
      this.activities.endTime = ''
      this.dateRange = []
      this.$refs[formName].resetFields();
    },
    showActivity(activitiesID) {
      this.open = true
      console.log(activitiesID)
      getActivity(activitiesID).then(res => {
        // console.log(res.data)
        this.form = res.data.data
      })
    },
    goBeSampleActivities(row) {
      this.$store.commit('SET_DATA',row)
      this.$router.push({
        path:'/TestManagement/BeSampleUnitsActivities',
        query:{
          tblActivities:row
        }
      })
    }
  },
  components: {
  }

}
</script>

<style scoped>
.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;
}
.link-type:hover {
  color: rgb(32, 160, 255);
}
</style>
